<div class="layui-fluid" id="app-vue" lay-title="地址管理">
    <div class="layui-card">
        <div class="custom-header">
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button type="primary"  @click="handleCreate({})"><i class="el-icon-plus"></i>新增</el-button>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-inline nepadmin-mar-r30">

                        </div>
                    </div>

                    <div class="layui-inline nepadmin-mar-r30">
                        <el-input placeholder="关键字查询" v-model="listQuery.keyword">
                            <el-button size="small" type="primary"  slot="append"   @click="_initData(true)">搜索</el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button size="small" type="danger"  @click="handleTableCheckboxDelete('/admin/index/platformLocationWordModel_dels')">批量删除</el-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body" >
            <el-table :data="tableData" v-loading="table_loading" border stripe  height="calc(100vh - 320px)"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="tableSelectable"  width="55"/>
                <el-table-column label="ID" prop="id" width="50"></el-table-column>

                <el-table-column label="名称" prop="name" show-overflow-tooltip width="220">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row"  prop="name" url='/admin/index/platformLocationWordModel_modInfo' />
                    </template>
                </el-table-column>
                <el-table-column label="字母" prop="word" align="center" width="120">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row"  prop="word" url='/admin/index/platformLocationWordModel_modInfo' />
                    </template>
                </el-table-column>

                <el-table-column label="状态" prop="status_name" align="center" width="100">
                    <template slot-scope="scope">
                        <my-switch-status
                                url='/admin/index/platformLocationWordModel_ModInfo'
                                :item="scope.row"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="更新日期" prop="update_time" align="center" width="150"> </el-table-column>

                <el-table-column label="操作"  fixed="right"   min-width="200">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleCreate( scope.row)">编辑</el-button>
                        <my-btn-del
                                url='/admin/index/platformLocationWordModel_Del'
                                :id="scope.row.id"
                                :fnc="()=>tableData.splice(scope.$index,1)"
                        />
                    </template>
                </el-table-column>

            </el-table>


            <div class="page-container display-flex">
                <el-pagination  @current-change="handlePageChange" @size-change="handlePageSizeChange"  :total="total" />
            </div>
        </div>
    </div>

    <create-location-word ref="createLocationWord" />

</div>

<script>

    layui.extend({
        createLocationWord: 'views/platform/components/createLocationWord',
    }).use(['admin', 'conf','view', 'jquery','createLocationWord','mixinsTableCheckbox'], function (admin, conf,view,$,createLocationWord,mixinsTableCheckbox) {


        var app = new Vue({
            el: '#app-vue',
            data: {
                table_loading:false,
                total:0,
                tableData: [],
                image_list: [],
                listQuery:{
                    keyword:'',
                    page:1,
                },
            },
            components:{
                "create-location-word":createLocationWord,
            },
            mixins:[mixinsTableCheckbox],
            created: function() {
                this._initData()
            },
            methods: {

                _initData:function(is_reset){
                    if(is_reset===true){
                        this.listQuery.page = 1

                    }
                    const that = this
                    //开启table加载效果
                    this.table_loading = true
                    admin.post({
                        url:'/admin/system/platformLocationWordModel_lists'
                        ,data:this.listQuery
                        ,success: function (res) {
                            that.table_loading = false
                            var data = res.data || {}
                            that.tableData = data.list || []
                            that.total = data.total || 0
                        }
                        ,complete:function(){
                            console.log('complete')
                            that.table_loading = false
                        }
                    })
                },

                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },

                handleCreate:function(item) {
                    this.$refs['createLocationWord'].showDialog(item,this)
                    // window[window_components_add].showDialog(Object.assign(item,{type:this.listQuery.type}))

                },
                handleDelete:function(item,index){
                    const that = this
                    this.$confirm('确定删除选中的数据', '提示', { type: 'error' }).then(function(v){
                        admin.post({
                            url:'/admin/system/platformLocationWordModel_del'
                            ,data:{id:item.id }
                            ,success: function (res) {
                                that.tableData.splice(index,1)
                            }
                        })
                    }).catch(function() {
                        console.log('cancel')
                    })
                },
                handleSwitchChange:function(item){
                    admin.post({
                        url:'/admin/system/platformLocationWordModel_modInfo'
                        ,data:{id:item.id,status:item.status_bool?1:2}
                        ,success: function (res) {

                        }
                    })
                }
            }
        })
    })

</script>